// 文章列表
<!-- 整个文章列表页面：添加van-cell显示一行数据, 为了做吸顶做铺垫, 所以尽量多复制几行, 给网页撑开有滚动条 -->
<template>
  <!-- :key ---提高v-for的更新性能；值要求不能重复，唯一的值而且是数字或字符串；所以才有id用id没id用索引 -->
  <!-- :obj="obj"---上面是在里面循环，现在要内部接收外部的obj。父传子 -->
  <div>
    <!-- 下拉刷新时 -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <!-- 删除不感兴趣文章--父传子removeObj -->
        <ArticleItem
          v-for="(obj, index) in list"
          :key="index"
          :obj="obj"

          @removeObj="removeFn"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem'
import { articleListAPI, dislikeAPI, reportAPI } from '@/api'
export default {
  components: {
    ArticleItem
  },

  // 获取文章列表，父传子
  props: {
    channelId: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      page: 1,
      list: [], // 数据渲染-文章数据
      isLoading: false, // 1.控制下拉刷新，不加载
      loading: false, // 底部加载中
      finished: false // 完成状态(true代表没有更多了)
    }
  },

  methods: {
    // 下拉刷新
    onRefresh () {
      // (重要)：当也买你下拉时，组件会在内部把isLoading自动改成true(圆圈加载中)
      this.list = [] // 2.刷新后列表清空，下面created重新渲染
      this.page = 1 // 7.刷新后回到第一页
      this.getListFn() // 5.
    },

    // 最后上拉加载更多(拽到底部会自动触发，list组件会把loading改成true)
    onLoad () {
      this.getListFn()
      this.page++
    },

    async getListFn () {
      const [, res] = await articleListAPI(this.channelId, this.page)
      console.log(res) // 3.当前频道对应的文章列表数据
      // this.list = res.data.data.results
      // 都得从数组里打散出来，形参一个新数组给list。(this.list以前的;res.data.data.result返回来的)
      this.list = [...this.list, ...res.data.data.results]
      this.isLoading = false // 6.

      // 加载状态结束
      this.loading = false
      if (res.data.data.results.length === 0) {
        this.finished = true // 没有更多数据了
      }
    },

    // 21.3前台删除不感兴趣文章
    // reportType里面传出来的
    async removeFn (artid, type, reportType) {
      // 用文章id，到数组里(api/Acyions)挨个文章对象对比，找到文章Id对应对象的下标
      const index = this.list.findIndex(obj => obj.art_id.toString() === artid.toString())
      // console.log(index)
      this.list.splice(index, 1)

      if (type === 'dislike') {
        // 21.4-通知后台-把数据删除掉
        await dislikeAPI(artid.toString())
      } else if (type === 'report') {
        // 21.5举报
        reportAPI(artid.toString(), reportType)
      }
    }
  },

  async created () {
    //   // 要传id：本页没有，所以开始父传子
    //   const [, res] = await articleListAPI(this.channelId, this.page)
    //   console.log(res)  // 当前频道对应的文章列表数据
    //   this.list = res.data.data.results

    this.getListFn() // 4.网页刚打开走一遍
  }
}
</script>

<style scoped lang="less">
// .title-box {
//   // 标题样式
//   display: flex;
//   justify-content: space-between;
//   align-items: flex-start;
// }

// .label-box {
//   // label描述样式
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
// }

// .thumb {
//   // 矩形黄金比例：0.618
//   width: 113px;
//   height: 70px;
//   background-color: #f8f8f8;
//   object-fit: cover;
// }

// .thumb-box {
//   display: flex;
//   justify-content: space-between;
// }
</style>
